<%@ page contentType="text/html; charset=iso-8859-1" language="java" 
         import="java.sql.*,java.util.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
	.Table{
        background-color:#EDF6EA;
        border:1px solid #000000;
    }
	.button{
		width:70px;
	}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <script>
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount - 1);
 
            var colCount = table.rows[1].cells.length;
 
            for(var i=0; colCount > i; i++) {
                
                var newcell = row.insertCell(i);
                
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                //alert(newcell.childNodes[1].type);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            alert("A");
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            alert("B");
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            alert("C");
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length - 2;
            
            for(var i=1; rowCount  > i; i++) {
                
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0].childNodes[1];
                
                if(null != chkbox) {
                    if(true == chkbox.checked) {
                        //alert(rowCount);
                        if(1 >= rowCount) {
                            alert("Cannot delete all the rows.");
                            break;
                        }
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
                }
 
            }
            }catch(e) {
                alert(e);
            }
        }
 
        $(document).ready(function(){
            $("#Add").click(function(){
                addRow("Table");
            });
            $("#Remove").click(function(){
                deleteRow("Table");
            });
            
        });
    </script>
<br />
<br />
<br />
<form id="form1" name="form1" method="post" action="grantRole">
  <table id ="Table" width="477" border="0" cellspacing="1" cellpadding="1" align="center" class="Table">
    <tr>
      <td><input id ="Add" type="button" name="AddRow" value="Add" class = "button" align="middle"/></td>
      <td><input id ="Remove" type="button" name="RemoveRow" value="Remove" class = "button" align="middle"/></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td width="62"><div align="center">
        <input type="checkbox" name="checkbox" value="checkbox" />
      </div></td>
      <td width="62"><strong>GRANT</strong></td>
      <td width="186">
          <select id ="pro"  name ="profileList">
                <%
                String username1 = (String)session.getAttribute("username");
                ArrayList<String> roleList1 = (ArrayList<String>) session.getAttribute("roleList");
                System.out.println("RoleList = " + roleList1);
                if(roleList1 != null) {
	                for(int i = 0; i < roleList1.size(); i++){
	                    String name = roleList1.get(i);
                %>
                <option value="<%=name%>"><%=name%></option>
                <%
                	}
                }
                %>
          </select>      </td>
      <td width="154">
          <strong>TO</strong> <em><%=username1%>      </em></td>
    </tr>
    <tr>
      <td colspan="4"><div align="center">
        <input id ="submit" type="submit" name="Submit" value="Submit" />
      </div></td>
    </tr>
  </table>
</form>
</body>

</html>
